var ElectricalMonitorTable = function () {
  var template = /*html*/ `
    <div>
      <el-table fit stripe border class="electrical-monitor-table" :data="machineData" style="width: 100%" :row-class-name="setRowClassName"
        :height="hasScroll?'parent':undefined" ref="electricalMonitorTable">
        <el-table-column :resizable="false" prop="equipmentName" label="设备名称" :auto-width="true" min-width="70px"></el-table-column>
        <el-table-column :resizable="false" prop="equipmentNo" label="设备编号" :auto-width="true" min-width="70px"></el-table-column>
        <el-table-column :resizable="false" label="设备状态" width="80px">
          <template slot-scope="scope">
            <span>{{ModuleUtil.getMachineStatus(scope.row.state)}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column :resizable="false" prop="lable" label="设备标签" :auto-width="true" min-width="70px"></el-table-column>-->
        <el-table-column :resizable="false" prop="orderNo" label="加工单号" :auto-width="true" min-width="70px"></el-table-column>
        <el-table-column :resizable="false" prop="machining" label="加工对象" :auto-width="true" min-width="70px"></el-table-column>
        <el-table-column :resizable="false" prop="orderId" label="订单编号" :auto-width="true" min-width="70px"></el-table-column>
        <el-table-column :resizable="false" prop="sumYield" label="订单数" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="thisYield" label="加工数量" min-width="100px"></el-table-column>

        <el-table-column :resizable="false" prop="feedTotal" label="投料数" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="useElectric" label="用电量(w.h)" :auto-width="true" min-width="95px"></el-table-column>
        <el-table-column :resizable="false" prop="useGas" label="用气量(立方)" :auto-width="true" min-width="95px"></el-table-column>
        <el-table-column :resizable="false" prop="avgElectric" label="单付用电量(w.h)" :auto-width="true" min-width="125px"></el-table-column>
        <el-table-column :resizable="false" prop="avgGas" label="单付用气量(立方)" :auto-width="true" min-width="125px"></el-table-column>
        <el-table-column :resizable="false" prop="factoryId" label="工厂型号" :auto-width="true" min-width="70px"></el-table-column>
        <el-table-column :resizable="false" prop="coustomId" label="客户型号" :auto-width="true" min-width="70px"></el-table-column>
        <!--<el-table-column :resizable="false" label="操作" width="100px" v-if="type==='monitor'">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="changeOrder(scope.row)">切换订单</el-button>
          </template>
        </el-table-column>-->
      </el-table>

      <el-dialog title="切换订单" :visible.sync="openChangeOrderDialog" :lock-scroll="true" :show-close="true" custom-class="sysAddFormDialog"
        @closed="changeOrderDialogClose" v-if="type==='monitor'">
        <div style="height:300px;overflow:auto;" v-if="openChangeOrderDialog">
          <slot name="dialogComp" :changeMachine="changeMachine"></slot>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      machineData: {
        type: Array,
        default: function () {
          return [];
        }
      },
      type: {
        type: String,
        default: 'monitor'
      },
      hasScroll: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {
        ModuleUtil: ModuleUtil,
        openChangeOrderDialog: false,
        changeMachine: {}
      };
    },
    methods: {
      changeOrder: function (machine) {
        this.openChangeOrderDialog = true;
        var changeMachine = _.cloneDeep(machine);
        this.changeMachine = changeMachine;
      },

      closeOrderDialog: function () {
        this.openChangeOrderDialog = false;
      },

      changeOrderDialogClose: function () {
        this.changeMachine = {};
      },

      setRowClassName: function (prop) {
        return `machine-state-row state-${prop.row.state}`;
      }
    },
    template: template
  };
}();